{% load staticfiles %}
<div class="modal fade" id="carto_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    生成图表
                </h4>
            </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#level-color" data-toggle="tab">级别底色</a></li>
                    <li><a href="#tab-bar-graph" data-toggle="tab">条形图</a></li>
                    <li><a href="#tab-area-graph" data-toggle="tab">饼状图</a></li>
                    <li><a href="#tab-symbol-graph" data-toggle="tab">艺术符号</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="level-color">
                        <div class="row my_row" style="margin-bottom: 5px">
                            <div class="col-md-4">
                                <label for="id_level_colorband" class="control-label">选择色带：</label>
                                <select class="form-control selectpicker" id="id_level_colorband">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_level_num" class="control-label">分级数：</label>
                                <input type="text" data-slider-min="2" data-slider-max="7" data-slider-step="1"
                                       data-slider-value="4" id="id_level_num">
                            </div>
                            <div class="col-md-4">
                                <label for="id_band_num" class="control-label">分级方法：</label>
                                <select class="form-control" id="id_level_method">
                                    <option value="equalDiff">等差分级</option>
                                    <option value="equalNum">等数量分级</option>
                                </select>
                            </div>

                        </div>
                        <div class="row my_row" style="margin-bottom: 5px">
                            <div class="col-md-4">
                                <label for="id_level_attr1" class="control-label">第1字段：</label>
                                <select class="form-control" id="id_level_attr1">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_level_attr2" class="control-label">第2字段：</label>
                                <select class="form-control" id="id_level_attr2">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_split" class="control-label">运算：</label>
                                <select class="form-control" id="id_operator">
                                    <option value="1">加</option>
                                    <option value="2">减</option>
                                    <option value="3">乘</option>
                                    <option value="4">除</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-bar-graph">
                        <div class="row my_row" style="margin-bottom: 5px">
                            <div class="col-md-4">
                                <label for="id_bar_attr" class="control-label">选择字段：</label>
                                <select id="id_bar_attr" class="selectpicker" multiple data-hide-disabled="true"
                                        data-size="5">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_bar_colorband" class="control-label">选择色带：</label>
                                <select id="id_bar_colorband" class="selectpicker form-control">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_bar_type" class="control-label">图表类型：</label>
                                <select id="id_bar_type" class="form-control">
                                    <option value="1">普通</option>
                                    <option value="2">立体化</option>
                                    <option value="3">阴影</option>
                                </select>
                            </div>
                        </div>
                        <div class="row my_row" style="margin-bottom: 5px">
                            <div class="col-md-4" id="id_div_bar_width">
                                <label for="id_bar_per_width" class="control-label">单位宽度：</label>
                                <input id="id_bar_per_width" type="text" data-slider-min="0"
                                       data-slider-max="10000" data-slider-step="1000" data-slider-value="5000"/>
                            </div>
                            <div class="col-md-4" id="id_div_bar_height">
                                <label for="id_bar_per_height" class="control-label">单位高度：</label>
                                <input id="id_bar_per_height" type="text" data-slider-min="0"
                                       data-slider-max="100" data-slider-step="0.2" data-slider-value="5"/>
                            </div>
                            <div class="col-md-4" id="id_div_bar_height_map">
                                <label for="id_bar_height_map" class="control-label">高度改正：</label>
                                <select class="form-control" id="id_bar_height_map">
                                    <option value="null">原始</option>
                                    <option value="sqrt">开方</option>
                                    <option value="log">对数</option>
                                    <option value="n2">平方</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-area-graph">
                        <div class="row my_row" style="margin-bottom: 5px">
                            <div class="col-md-4">
                                <label for="id_area_attr" class="control-label">选择字段：</label>
                                <select id="id_area_attr" class="selectpicker" multiple data-hide-disabled="true"
                                        data-size="5">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_area_colorband" class="control-label">选择色带：</label>
                                <select id="id_area_colorband" class="selectpicker form-control">
                                </select>
                            </div>
                            <div class="col-md-3" id="id_div_area_isprop">
                                <label for="id_area_prop" class="control-label">是否分级：</label>
                                <input id="id_area_prop" type="checkbox" checked data-on-class="btn-primary">
                            </div>
                        </div>
                        <div class="row my_row">
                            <div class="col-md-4" id="id_div_area_prop">
                                <label for="id_area_prop_attr" class="control-label">分级字段：</label>
                                <select class="form-control" id="id_area_prop_attr">
                                </select>
                            </div>
                            <div class="col-md-4" id="id_div_area_num">
                                <label for="id_area_prop_num" class="control-label">分级数：</label>
                                <input type="text" data-slider-min="2" data-slider-max="7" data-slider-step="1"
                                       data-slider-value="4" id="id_area_prop_num">
                            </div>
                            <div class="col-md-4" id="id_div_area_size">
                                <label for="id_area_size_range" class="control-label">尺寸范围：</label>
                                <input id="id_area_size_range" type="text" value="" data-slider-min="1" width="100px"
                                       data-slider-min="6000" data-slider-max="10000" data-slider-step="500"
                                       data-slider-value="[6000,10000]"/>
                            </div>
                            <div class="col-md-4" id="id_div_not_prop" style="display: none;">
                                <label for="id_area_size_one" class="control-label">图表尺寸：</label>
                                <input id="id_area_size_one" type="text" data-slider-min="0"
                                       data-slider-max="10000" data-slider-step="1000" data-slider-value="5000"/>
                            </div>

                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-symbol-graph">
                        <div class="row my_row">
                            <div class="col-md-4">
                                <label for="id_symbol_attr" class="control-label">选择字段：</label>
                                <select class="form-control" id="id_symbol_attr">
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_symbol_size_range" class="control-label">尺寸范围：</label>
                                        <input id="id_symbol_size_range" type="text" value="" data-slider-min="1"
                                               width="500px"
                                               data-slider-max="100000" data-slider-step="500"
                                               data-slider-value="[1,100000]"/>
                            </div>
                            <div class="col-md-4">
                                <label for="id_symbol_select_pic" class="control-label">符号种类：</label>
                                <select class="selectpicker remove-example" id="id_symbol_select_pic" multiple>
                                    <option id="S_几何符号" value="#">几何符号</option>
                                    <option class="S_几何符号 hider padd" id="S_平面符号" value="#">平面符号</option>
                                    <option class="S_平面符号 hider padd_more" id="S_平面符号" value="GSPFCL">圆形
                                    </option>
                                    <option class="S_平面符号 hider padd_more" id="S_平面符号" value="GSPFRE">矩形
                                    </option>
                                    <option class="S_几何符号 hider padd" id="S_立体符号" value="#">立体符号</option>
                                    <option class="S_立体符号 hider padd_more" id="S_立体符号" value="GSSFCL">圆柱
                                    </option>
                                    <option class="S_立体符号 hider padd_more" id="S_立体符号" value="GSSFTR">三棱柱
                                    </option>
                                    <option class="S_立体符号 hider padd_more" id="S_立体符号" value="GSSFRE">四棱柱
                                    </option>
                                    <option id="S_艺术符号" value="#">艺术、文字符号</option>
                                    <option class="S_艺术符号 hider padd" id="S_自然条件" value="#">自然条件</option>
                                    <option class="S_自然条件 hider padd_more" id="S_地质" value="ASNCGE">地质</option>
                                    <option class="S_自然条件 hider padd_more" id="S_地貌" value="ASNCLA">地貌</option>
                                    <option class="S_自然条件 hider padd_more" id="S_气候" value="ASNCCL">气候</option>
                                    <option class="S_自然条件 hider padd_more" id="S_水文" value="ASNCHY">水文</option>
                                    <option class="S_自然条件 hider padd_more" id="S_土壤" value="ASNCSO">土壤</option>
                                    <option class="S_自然条件 hider padd_more" id="S_植被" value="ASNCVE">植被</option>
                                    <option class="S_自然条件 hider padd_more" id="S_动物" value="ASNCAN">动物</option>
                                    <option class="S_自然条件 hider padd_more" id="S_自然保护区" value="ASNCNP">自然保护区
                                    </option>
                                    <option class="S_艺术符号 hider padd" id="S_自然资源" value="#">自然资源</option>
                                    <option class="S_自然资源 hider padd_more" id="S_土地资源" value="ASNRLR">土地资源
                                    </option>
                                    <option class="S_自然资源 hider padd_more" id="S_水资源" value="ASNRWR">水资源
                                    </option>
                                    <option class="S_自然资源 hider padd_more" id="S_矿产资源" value="ASNRWR">矿产资源
                                    </option>
                                    <option class="S_自然资源 hider padd_more" id="S_森林资源" value="ASNRTR">森林资源
                                    </option>
                                    <option class="S_自然资源 hider padd_more" id="S_海洋资源" value="ASNROR">海洋资源
                                    </option>
                                    <option class="S_自然资源 hider padd_more" id="S_旅游资源" value="ASNRTO">旅游资源
                                    </option>
                                    <option class="S_艺术符号 hider padd" id="S_基础设施" value="#">基础设施</option>
                                    <option class="S_基础设施 hider padd_more" id="S_交通运输" value="ASBITP">交通运输
                                    </option>
                                    <option class="S_基础设施 hider padd_more" id="S_邮电通信" value="ASBIPT">邮电通信
                                    </option>
                                    <option class="S_艺术符号 hider padd" id="S_社会经济" value="#">社会经济</option>
                                    <option class="S_社会经济 hider padd_more" id="S_人口" value="ASCEPO">人口</option>
                                    <option class="S_社会经济 hider padd_more" id="S_综合经济" value="ASCEEN">综合经济
                                    </option>
                                    <option class="S_社会经济 hider padd_more" id="S_文化教育" value="ASCEED">文化教育
                                    </option>
                                    <option class="S_社会经济 hider padd_more" id="S_医疗卫生" value="ASCEHC">医疗卫生
                                    </option>
                                    <option class="S_艺术符号 hider padd" id="S_生态环境" value="#">生态环境</option>
                                    <option class="S_生态环境 hider padd_more" id="S_自然灾害" value="ASECND">自然灾害
                                    </option>
                                    <option class="S_生态环境 hider padd_more" id="S_生态环境变化" value="ASECEE">生态环境变化
                                    </option>
                                    <option class="S_生态环境 hider padd_more" id="S_环境污染" value="ASECEP">环境污染
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-8" id="id_symbol_select_div">


                            </div>
                        </div>
                        <div class="row my_row">
                            <div class="col-md-4">
                                    <label for="id_symbol_select" class="control-label">选择符号：</label>
                                    <select class="form-control selectpicker" id="id_symbol_select">
                                    </select>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btn-draw" type="button" class="btn btn-primary" data-dismiss="modal" onclick="carto_Draw()">
                    绘制
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var global_svg_width, global_svg_height;
    $(document).ready(function () {

        var $symbol_select = $("#id_symbol_select");
        var all_symbol_items=[];
        $('.remove-example').find('.hider').hide();
        $('#id_symbol_select_pic').change(function () {
            var childSelector = $(this).find('option[id]:selected').map(function () {
                return '.' + this.id;
            }).get();
            var $cvisible = $(this).find('.hider').hide().filter(childSelector.join()).show();
            $(this).find('.hider').not($cvisible).prop('selected', false);
            $(this).selectpicker('refresh');
            var selected=$(this).val().filter(function(e){return e!="#"});
            var scc=$symbol_select.children();
            scc.remove();
            var items=Global_Symbols.filter(function(e){
                for(var i in selected)
                {
                    if(e.includes(selected[i]))
                    return true;
                }
                return false;
            });
            for (var i in items) {
            var itemo = Snap.format('<option value={value} data-content="<div><img style={style} src={src}></img></div>"></option>', {
                value: items[i],
                src: '/media/symbolsvg/' + items[i] + ".png",
                style: "height:40px"
            });
            $symbol_select.append(itemo);
        }
            $symbol_select.selectpicker('refresh');
        });

        $("#id_symbol_size_range").slider({});
        $("#id_area_size_range").slider({});
        $("#id_area_size_one").slider({});
        $("#id_area_prop_num").slider({});
        $("#id_level_num").slider({});
        $("#id_bar_per_width").slider({});
        $("#id_bar_per_height").slider({});
        $('#id_area_prop').checkboxpicker();
        $('#id_symbol_prop').checkboxpicker();
        for (var i in colormap) {
            var item = '<option value=\"' + i + '\" data-content=\"<img src=\'/media/colorband/' + i + '.png\'>\"></option>';
            if (i.startsWith("1"))
                $("#id_level_colorband").append(item);
            else {
                $("#id_area_colorband").append(item);
                $("#id_bar_colorband").append(item);
            }
        }
        for (var i in Global_Symbols) {
            var itemo = Snap.format('<option value={value} data-content="<div><img style={style} src={src}></img></div>"></option>', {
                value: Global_Symbols[i],
                src: '/media/symbolsvg/' + Global_Symbols[i] + ".png",
                style: "height:40px"
            });
            $symbol_select.append(itemo);
        }
        $('#carto_modal').on('shown.bs.modal', function () {
            if (is_data_updated) {
                $("#id_level_attr1").html("");
                $("#id_area_attr").html("");
                $("#id_area_prop_attr").html("");
                $("#id_level_attr2").html("<option value='null'>空</option>");
                if (data_upload == null || data_upload.header == null)
                    return;
                data_upload.header.forEach(function (item) {
                    $("#id_level_attr1").append('<option value=\"' + item + '\">' + item + '</option>');
                    $("#id_level_attr2").append('<option value=\"' + item + '\">' + item + '</option>');
                    $("#id_area_attr").append('<option value=\"' + item + '\">' + item + '</option>');
                    $("#id_bar_attr").append('<option value=\"' + item + '\">' + item + '</option>');
                    $("#id_area_prop_attr").append('<option value=\"' + item + '\">' + item + '</option>');
                    $("#id_symbol_attr").append('<option value=\"' + item + '\">' + item + '</option>');
                });
                $('#id_area_attr').selectpicker('render');
                $('#id_area_attr').selectpicker('refresh');
                $('#id_area_attr').css("width", "80%");
                $('#id_bar_attr').selectpicker('render');
                $('#id_bar_attr').selectpicker('refresh');
                $('#id_bar_attr').css("width", "80%");
                is_data_updated = false;
            }
        });
        $("#id_area_prop").change(function () {
            if (this.checked) {
                $("#id_div_not_prop").css("display", "none");
                $("#id_div_area_prop").css("display", "inline");
                $("#id_div_area_size").css("display", "inline");
                $("#id_div_area_num").css("display", "inline");
            }
            else {
                $("#id_div_area_prop").css("display", "none");
                $("#id_div_area_size").css("display", "none");
                $("#id_div_area_num").css("display", "none");
                $("#id_div_not_prop").css("display", "inline");
            }
        });
    });

    function carto_Draw() {
        var carto_method = "", svg_root_name = $("svg").attr("id");
        var level_color_band, level_num, level_method, level_attr1, level_attr2, level_operator;
        var graph_type, graph_attr, graph_color_band, graph_is_prop, graph_size_range, graph_size_one, graph_prop_attr, graph_prop_num;
        var bar_attr, bar_type, bar_color_band, bar_per_width, bar_per_height, bar_height_map;
        var symbol_attr, symbol_svg, symbol_size_range;
        if ($("#level-color").hasClass("active")) {
            carto_method = "level-color";
            level_color_band = $("#id_level_colorband").val().trim();
            level_num = $("#id_level_num").val() == "" ? 0 : parseInt($("#id_level_num").val());
            level_method = $("#id_level_method").val().trim();
            level_attr1 = $("#id_level_attr1").val().trim();
            level_attr2 = $("#id_level_attr2").val().trim();
            level_operator = $("#id_operator").val().trim();
            var data_attr1 = data_upload.get_attr_name(level_attr1);
            var data_attr2 = data_upload.get_attr_name(level_attr2);
            var data = Array();
            if (level_attr2 != 'null') {
                for (var i = 0; i < data_upload.row_num; i++) {
                    switch (level_operator) {
                        case "1":
                            data.push(data_attr1[i] + data_attr2[i]);
                            break;
                        case "2":
                            data.push(data_attr1[i] - data_attr2[i]);
                            break;
                        case "3":
                            data.push(data_attr1[i] * data_attr2[i]);
                            break;
                        case "4":
                            data.push(data_attr1[i] / data_attr2[i]);
                            break;
                    }
                }
            }
            else {
                data = data_attr1;
            }
            drawLevel(level_color_band, level_num, level_method, data, data_upload.get_attr_name("编码"));
        }
        else if ($("#tab-area-graph").hasClass("active")) {
            graph_type = "pieChart";
            graph_attr = $("#id_area_attr").val();
            graph_color_band = $("#id_area_colorband").val().trim();
            graph_is_prop = $("#id_area_prop").prop("checked");
            graph_size_range = $("#id_area_size_range").val().split(",").map(function (i) {
                return parseFloat(i)
            });
            graph_size_one = parseInt($("#id_area_size_one").val());
            graph_prop_attr = $("#id_area_prop_attr").val().trim();
            graph_prop_num = parseInt($("#id_area_prop_num").val().trim());
            drawGraph({
                "svg_root_name": svg_root_name,
                "graph_type": graph_type,
                "data": data_upload,
                "graph_color_band": graph_color_band,
                "graph_attr": graph_attr,
                "is_prop": graph_is_prop,
                "graph_prop_num": graph_prop_num,
                "graph_size_range": graph_size_range,
                "graph_prop_attr": graph_prop_attr,
                "graph_size_one": graph_size_one
            });
            //drawGraph(svg_root_name, data_upload, graph_type, graph_color_band, graph_attr, graph_is_prop, graph_prop_num, graph_size_range, graph_prop_attr, graph_size_one);
        }
        else if ($("#tab-bar-graph").hasClass("active")) {
            graph_type = "barChart";
            bar_attr = $("#id_bar_attr").val();
            bar_type = $("#id_bar_type").val();
            bar_color_band = $("#id_bar_colorband").val().trim();
            bar_per_width = parseFloat($("#id_bar_per_width").val().trim());
            bar_per_height = parseFloat($("#id_bar_per_height").val().trim());
            bar_height_map = $("#id_bar_height_map").val();
            drawGraph({
                "svg_root_name": svg_root_name,
                "graph_type": graph_type,
                "data": data_upload,
                "bar_color_band": bar_color_band,
                "bar_attr": bar_attr,
                "bar_per_width": bar_per_width,
                "bar_per_height": bar_per_height,
                "bar_height_map": bar_height_map
            });
        }
        else if ($("#tab-symbol-graph").hasClass("active")) {
            symbol_svg = $("#id_symbol_select").val().trim();
            symbol_attr = $("#id_symbol_attr").val().trim();
            symbol_size_range = $("#id_symbol_size_range").val().split(",").map(function (i) {
                return parseFloat(i)
            });
            drawSymbol({
                "symbol_svg": symbol_svg,
                "svg_root_name": svg_root_name,
                "data": data_upload,
                "symbol_attr": symbol_attr,
                "symbol_size_range": symbol_size_range
            });
        }
    }
</script>